<template>
  <view class="login">
    <view class="login_wel">
      <view class="wel">欢迎加入</view>
      <view class="doc">白龙软件</view>
      <view class="lo">
        <button @click="phoneLogin">手机号一键登录</button>
        <button @click="register">新用户注册</button>
      </view>
      <agreeDetail></agreeDetail>
    </view>
    <view class="login_lo">
      <view class="contet">
        <view>---</view>
        <view>其他登录方式</view>
        <view>---</view>
      </view>
      <view class="cs_login">
        <!-- <view @click="wechatLogin">
          <image src="../../static/escort-service/location-white.png"></image>
          <view>微信</view>
        </view> -->
        <view @click="loginIn">
          <image src="../../static/escort-service/location-white.png"></image>
          <view>密码登录</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import agreeDetail from './agreeDetail.vue'
export default {
  components: {
    agreeDetail
  },
  methods: {
    phoneLogin() {
      uni.navigateTo({ // 手机号一键登录
        url: '/pages/login/phone-login'
      })
    },
    register() {
      uni.navigateTo({ // 新用户注册
        url: '/pages/login/register'
      })
    },
    wechatLogin() {
      uni.login({ // 微信授权登录
        provider: 'weixin',
        success: loginRes => {
          console.log(loginRes.authResult);
          let data = {
            type: 1,
            access_token: loginRes.authResult.access_token,
            openid: loginRes.authResult.openid
          }
          uni.showToast({
            title: loginRes.code
          })
        },
        fail: err => {
          uni.showToast({
            icon: 'none',
            title: '授权失败！'
          })
        }
      })
    },
    loginIn() {
      uni.navigateTo({
        url: '/pages/login/loginin'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.login{
  width: 670rpx;
  height: 100%;
  background: #fff;
  padding: 0 40rpx;
  .login_wel{
    position: relative;
    top: 25%;
    .wel{
      color: #505050;
      font-size: 36rpx;
    }
    .doc{
      color: #505050;
      font-weight: bold;
      font-size: 72rpx;
      line-height: 120rpx;
    }
    .lo{
      margin-top: 30rpx;
      button{
        border-radius: 25px;
      }
      button:nth-child(1){
        background: #41ab85;
        color: #fff;
      }
      button:nth-child(2){
        background: #a6a6a6;
        color: #fff;
        margin-top: 20rpx;
      }
    }
  }
  .login_lo{
    width: 670rpx;
    position: fixed;
    bottom: 60rpx;
    .contet{
      display: flex;
      justify-content: center;
      color: #505050;
      font-size: 28rpx;
      view:nth-child(2){
        margin: 0 20rpx;
      }
    }
    .cs_login{
      margin-top: 40rpx;
      color: #505050;
      font-size: 28rpx;
      display: flex;
      justify-content: center;
      view{
        display: flex;
        flex: 1;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        image{
          width: 84rpx;
          height: 84rpx;
          background: #41ab85;
          border-radius: 42rpx;
        }
        view{
          margin-top: 20rpx;
        }
      }
    }
  }
}
</style>